<template>
  <div>
    <el-dialog
            :title="title"
            :visible.sync="showDialog" custom-class="scroll-body"
            :close-on-click-modal="false"
            @close="closeGenerateForm"
            width="720px"
            append-to-body="true">
      <el-container>
        <el-form
                ref="form"
                :inline="true"
                :model="form" class="common-form"
                :rules="rules"
                label-width="110px">
          <template>
            <div class="blacken">
              <el-divider><h3 style="font-size: 20px;">基本信息</h3></el-divider>
            </div>
          </template>
          <el-form-item label="表名" prop="tableName">
            <el-input placeholder="请输入表名" v-model="form.tableName" disabled/>
          </el-form-item>
          <el-form-item label="包名" prop="packageName">
            <el-input placeholder="请输入包名" v-model="form.packageName"/>
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input placeholder="请输入作者" v-model="form.author"/>
          </el-form-item>
          <el-form-item label="表前缀" prop="tablePrefix">
            <el-input placeholder="请输入表前缀" v-model="form.tablePrefix"/>
          </el-form-item>
          <el-form-item label="备注" prop="comments">
            <el-input placeholder="请输入备注"   v-model="form.comments"/>
          </el-form-item>
          <el-form-item label="生成部分" prop="genPart" class="change-select-202">
            <el-select v-model="form.genPart" placeholder="请选择生成部分">
              <el-option
                      v-for="item in typeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="前端系统名称" prop="frontSysName">
            <el-input placeholder="请输入前端系统名称" v-model="form.frontSysName"/>
          </el-form-item>
          <el-form-item label="二级路由" prop="accessUrl">
            <el-input placeholder="请输入二级路由" v-model="form.accessUrl"/>
          </el-form-item>
          <template>
            <div class="blacken">
              <el-divider><h3 style="font-size: 20px;">展示列</h3></el-divider>
            </div>
          </template>
          <el-form-item label="展示列" prop="displayColumns" class="dynamic-item" :rules="{required: true, message: '展示列不能为空', trigger: 'blur'}">
            <el-select filterable v-model="form.displayColumns" multiple popper-class="change-Option-width"  class="full-width" placeholder="请选择展示列">
              <el-option
                      v-for="item in displayColumn"
                      :key="item.columnName"
                      :label="item.comments"
                      :value="item.columnName">
              </el-option>
            </el-select>
          </el-form-item>
          <template>
            <div class="blacken">
              <el-divider><h3 style="font-size: 20px;">查询列</h3></el-divider>
            </div>
          </template>
          <el-form-item label="查询列" prop="queryColumns" class="dynamic-item" :rules="{required: true, message: '查询列不能为空', trigger: 'blur'}">
            <el-select filterable v-model="form.queryColumns" multiple popper-class="change-Option-width"  class="full-width" placeholder="请选择查询列">
              <el-option
                      v-for="item in displayColumn"
                      :key="item.columnName"
                      :label="item.comments"
                      :value="item.columnName">
              </el-option>
            </el-select>
          </el-form-item>
          <template>
            <div class="blacken">
              <el-divider><h3 style="font-size: 20px;">添加列</h3></el-divider>
            </div>
          </template>
          <el-form-item label="添加列" prop="addColumns" class="dynamic-item" :rules="{required: true, message: '添加列不能为空', trigger: 'blur'}">
            <el-select filterable v-model="form.addColumns" multiple   class="full-width" placeholder="请选择添加列">
              <el-option
                      v-for="item in displayColumn"
                      :key="item.columnName"
                      :label="item.comments"
                      :value="item.columnName">
              </el-option>
            </el-select>
          </el-form-item>
          <template>
            <div class="blacken">
              <el-divider><h3 style="font-size: 20px;">校验列</h3></el-divider>
              <template  v-for="(column, index) in form.validateColumns">
                <el-form-item class="dynamic-item"
                              :label="'校验列' + (index + 1)"
                              :key="'validateColumn'+ index"
                              :prop="'validateColumns.' + index + '.name'"
                              :rules="{required: true, message: '校验列不能为空', trigger: 'blur'}"
                >
<!--                  <el-input v-model="column.name"></el-input>-->
                  <el-select filterable v-model="column.name" popper-class="change-Option-width" class="validate-select" placeholder="请选择校验列">
                    <el-option
                            v-for="item in displayColumn"
                            :key="item.columnName"
                            :label="item.columnName"
                            :value="item.columnName">
                      <span style="float: left">{{ item.columnName }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.comments }}</span>
                    </el-option>
                  </el-select>
                  <el-button v-if="index!=0"  class="margin-left-10" size="mini" type="danger" icon="el-icon-delete" @click.prevent="deleteDisplay(column,'validateParent')" circle></el-button>
                  <el-button v-if="index==form.validateColumns.length-1"  class="margin-left-10" size="mini" type="primary" icon="el-icon-plus" @click.prevent="addDisplay('validateParent')" circle></el-button>
                </el-form-item>
                <el-form-item class="full-width dynamic-item"
                              v-for="(item, Index) in form.validateColumns[index].rules"
                              :label="'校验规则' + (index + 1) + '-' + (Index + 1)"
                              :key="'validateRule'+ Index"
                              :prop="'validateColumns['+index+'].rules.' + Index + '.value'"
                              :rules="{required: true, message: '校验规则不能为空', trigger: 'blur'}"
                >
                  <el-input v-model="item.value"></el-input>
                  <el-button v-if="Index!=0"  class="margin-left-10" size="mini" type="danger" icon="el-icon-delete" @click.prevent="deleteDisplay(item,'validateChild',form.validateColumns[index].rules)" circle></el-button>
                  <el-button v-if="Index==form.validateColumns[index].rules.length-1"  class="margin-left-10" size="mini" type="primary" icon="el-icon-plus" @click.prevent="addDisplay('validateChild',column)" circle></el-button>
                </el-form-item>
              </template>
            </div>
          </template>
        </el-form>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-circle-plus-outline"  size="small" @click="saveForm" type="primary">下载</el-button>
        <el-button icon="el-icon-circle-close" size="small"  @click="closeGenerateForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import sysGenCodeApi from "./api/genCodeIndex.service";
  export default {
    name: "newGenerateForm",
    data() {
      return {
        showDialog:false,
        title:"",
        displayColumn:[],
        form:{
          packageName:"",
          accessUrl:"code",
          frontSysName:"",
          author:"",
          moduleName:"",
          tablePrefix:"",
          tableName:"",
          genType:"",
          swagger2:false,
          genPart:"all",
          comments:"",
          displayColumns: [],
          queryColumns:[],
          addColumns:[],
          validateColumns:[
            {
              name:'',
              rules:[
                {
                  value:''
                }
              ]
            }
          ]
        },
        rules:{

        },
        typeList:[
          {label:"全部",value:"all"},
          {label:"前端",value:"frontEnd"},
          {label:"后端",value:"backEnd"},
        ],
      }
    },
    created() {

    },
    methods: {
      show(tableName,dsName){
        let params = Object.assign({
          tableName: tableName,
          dsName: dsName ? dsName : "master"
        });
        sysGenCodeApi.getTabColumn(params).then(res => {
          this.displayColumn = res.data;
        });
        this.showDialog = true;
        this.title = "生成";
        this.form.tableName = tableName;
      },
      getTabColumn(tableName) {
        let _this = this;
        let params = Object.assign({
          tableName: tableName,
          dsName: this.searchForm.dsName ? this.searchForm.dsName : "master"
        });

        sysGenCodeApi.getTabColumn(params).then(res => {
          this.displayColumns = res.data;
        });
      },
      deleteDisplay(item,type,array){
        let index;
        if(type=="display"){
          index = this.form.displayColumns.indexOf(item);
        }else if(type=="add"){
          index = this.form.addColumns.indexOf(item);
        }else if(type=="query"){
          index = this.form.queryColumns.indexOf(item);
        }else if(type=="validateParent"){
          index = this.form.validateColumns.indexOf(item);
        }else if(type=="validateChild"){
          index = array.indexOf(item);
        }
        if (index !== -1) {
          if(type=="display"){
            this.form.displayColumns.splice(index, 1)
          }else if(type=="add"){
            this.form.addColumns.splice(index, 1)
          }else if(type=="query"){
            this.form.queryColumns.splice(index, 1)
          }else if(type=="validateParent"){
            this.form.validateColumns.splice(index, 1);
          }else if(type=="validateChild"){
            array.splice(index, 1);
          }
        }
      },
      addDisplay(type,column){
        if(type=="display"){
          this.form.displayColumns.push({
            value: '',
          });
        }else if(type=="add"){
          this.form.addColumns.push({
            value: '',
          });
        }else if(type=="query"){
          this.form.queryColumns.push({
            value: '',
          });
        }else if(type=="validateParent"){
          this.form.validateColumns.push({
            name:'',
            rules:[
              {
                value:''
              }
            ]
          });
        }else if(type=="validateChild"){
          column.rules.push({
            value:''
          })
        }
      },
      saveForm(){
        let _this = this;
        this.$refs["form"].validate(valid => {
          if(valid){
            let formInfo = {
              packageName:_this.form.packageName,
              accessUrl:_this.form.accessUrl,
              frontSysName:_this.form.frontSysName,
              author:_this.form.author,
              moduleName:_this.form.moduleName,
              tablePrefix:_this.form.tablePrefix,
              tableName:_this.form.tableName,
              genType:_this.form.genType,
              swagger2:true,
              genPart:_this.form.genPart,
              comments:_this.form.comments,
              frontColumns:{
                displayColumns:_this.form.displayColumns,
                addColumns:_this.form.addColumns,
                queryColumns:_this.form.queryColumns,
                validateColumns:[]
              }
            };
            if(_this.form.validateColumns && _this.form.validateColumns.length>0){
              _this.form.validateColumns.forEach(function(item){
                let array = [];
                if(item.rules && item.rules.length>0){
                  item.rules.forEach(function(ele){
                    array.push(ele.value)
                  })
                }
                formInfo.frontColumns.validateColumns.push({name:item.name,rules:array});
              })
            }
            sysGenCodeApi.genForm(formInfo);
          }
        })
      },
      closeGenerateForm(){
        this.$refs['form'].resetFields();
        this.showDialog = false;
      }
    }
  }
</script>

<style scoped>
  .full-width {
    width:100%;
  }
  .margin-left-10 {
    margin-left:10px;
  }
  .dynamic-item .el-input {
    width:440px;
  }
  .dynamic-item .validate-select {
    width:440px;
  }
  </style>
<style>
  .form-textarea .el-form-item__content {
    width: 528px;
  }

  .change-select-202 .el-select {
    width: 202px;
  }

  .scroll-body .el-dialog__body {
    height: 500px;
    overflow: auto;
  }

  .form-switch .el-switch {
    width: 202px;
  }

  .blacken .el-divider {
    background-color: #000000;
  }

  .dynamic-item .el-form-item__content {
    width: 525px;
  }

</style>
